Array of record objects.

<div class="definition">
    Array, default = []
</div>

You can define records during object creation or during run-time. Generally, there are two data source types: local
and remote. If you do not defined the <a class="property" href="w2grid.url">.url</a> property the data source is local and you can add
records to the grid in the following way:
<textarea class="javascript">
let grid = new w2grid({
    name    : 'grid',
    url     : 'server/side/path/to/records',
    columns: [
        { field: 'recid', text: 'ID', size: '50px' },
        { field: 'lname', text: 'Last Name', size: '30%' },
        { field: 'fname', text: 'First Name', size: '30%' },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'End Date', size: '120px' }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/23/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
    ]
});
</textarea>

After object creation you can add records either by appending them to the <span class="property">.records</span> array (
do not forget to call <a class="argument" href="w2grid.refresh">.refresh</a> method to update on the screen), or by using
<a class="argument" href="w2grid.add">.add()</a> method, which will add and update records on the screen.
<div style="height: 10px"></div>

If you defined the <a class="property" href="w2grid.url">.url</a>, the records will be loaded from this url overwriting any
locally defined records.
<textarea class="javascript">
let grid = new w2grid({
    name    : 'grid',
    url     : 'server/side/path/to/records',
    columns: [
        { field: 'recid', text: 'ID', size: '50px' },
        { field: 'lname', text: 'Last Name', size: '30%' },
        { field: 'fname', text: 'First Name', size: '30%' },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'End Date', size: '120px' }
    ]
});
</textarea>

<h4>The record object</h4>

Each record object must have a <span class="property">recid</span> property that uniquely identifies the record. Also it might have some
other system properties: style, summary, and editable.
<div style="height: 10px"></div>

The following is the structure of the record object:
<textarea class="javascript">
record = {
    recid      : null,   // unique record id
    [field-1]  : '',     // field 1
    [field-2]  : '',     // field 2
    ...
    [field-N]  : '',     // field N
    w2ui       : {
        style        : '',     // additional CSS style for &lt;tr ...&gt; tag  or for &lt;td ...&gt; tag if it is an object
        class        : '',     // additional CSS class for &lt;tr ...&gt; tag  or for &lt;td ...&gt; tag if it is an object
        summary      : false,  // indicates if it is a summary record (summary records appear on the bottom)
        editable     : true,   // indicate is record is editable (must have column.editable property set)
        expanded     : 'none', // can be true | false | 'none' | 'spinner'
        changes      : null,   // readonly, object with user changes by inline editing
        colspan      : null,   // colspan object, e.g. { field: 5, ...}
        hideCheckBox : false,  // hide checkbox for this record if grid.show.selectColumn is set
        children     : [],     // array of record objects, can have sub children
        parent_recid : null,   // (internally set, id of the parent record, when children are copied to records array)
    }
}
</textarea>
Where "field-1", ..., "field-N" have to correspond to the field property of the columns they need to be displayed in.
You can use render method of the column to create columns that have aggregates from several fields.
See <a class="method" href="w2grid.columns">.columns</a> property.